<template>
    <!-- 二维码登录 -->
    <div class="erwei">
        <h1 class="title">微信扫码登录</h1>
        <div class="erwei-img" v-loading="loading">
            <img width="200px" :src="qrImg" />
            <i class="mask" v-if="showQrMask" :style="maskBg" @click="updateQr"></i>
        </div>
        <p>
            <svg aria-hidden="true" class="icon-wx">
                <use xlink:href="#icon-weixin"></use>
            </svg>
            <b>请使用微信扫描二维码</b>
        </p>
    </div>

</template>

<script>
// import { Loading } from 'element-ui';
//引入socket.io
import socketIo from "socket.io-client"
// 引入qrcode
import qrcode from "qrcode"
// 引入api
import * as api from "@/api/users";
// 引入失败遮罩图片
import invalidImg from "@/assets/images/imgshixiao.png";
//引入成功图片
import successImg from "@/assets/images/scancode.png";

import storage from "@/utils/storage"


export default {
    props: {
    storageUserInfo: {
      required: true,
    },
  },


    // props: ['qrLogin']
    data() {
        return {
            // 二维码图片
            qrImg: "",
            // 是否显示遮罩
            showQrMask: false,
            // 遮罩背景样式
            maskBg: { backgroundImage: `url(${successImg})` },
            loading:true
        };
    },

    created() {
        //建立socket连接
        let io = socketIo('wss://chst.vip')
        //监听连接的事件
        io.on("connectSuccess", async ({ sid }) => {
            // console.log(sid);
            //将sid存储到本地
            storage.set('qf-sid', sid)
            this.getQrUrl(sid)
        })

        //无效的二维码
        io.on("invalidCode", (data) => {
            console.log(data);
            //展示遮罩
            this.showQrMask = true;
            //显示无效的二维码遮罩样式
            this.maskBg = { backgroundImage: `url(${invalidImg})` };
        })

        // 扫码成功
        io.on("scancodeSuccess", async ({ state, wechatCode, msg }) => {
                // 扫码成功显示遮罩
            this.showQrMask = true;
            this.maskBg = { backgroundImage: `url(${successImg})` };
            if (state) {
                let res = await api.wechatLoginApi(wechatCode);
                console.log(res);
                //将内容存储到本地
                this.storageUserInfo(res.data);
                // 跳转页面
                this.$router.push("/")
            } else {
                console.error(msg);
            }
        });
    },
    methods: {
        async getQrUrl(sid) {
            //打开加载动画
            this.loading=true
            //请求获取二维码地址
            let res = await api.getQrCodeApi(sid)
            // console.log(res);
            let { scanCodeUrl: qrcodeUrl } = res.data;
            //通过qrcode插件来生成二维码
            qrcode.toDataURL(qrcodeUrl, (err, img) => {
                if (err) {
                    throw err
                }
                // console.log(err);
                this.qrImg = img

                this.showQrMask = false
                //关闭加载动画
                this.loading=false
            })
        },
        // 更新二维码地址
        updateQr() {
            //获取本地的sid
            let sid = storage.get("qf-sid");
            console.log(sid);
            this.getQrUrl(sid);
        },
    }

}



</script>


<style lang="less" scoped>
.title {
    width: 100%;
    /* font-size: 30px; */
    text-align: center;
    margin-bottom: 30px;
    color: #fff;
    margin: 0 0 60px 0;

}

.icon-wx {
    width: 25px;
    height: 25px;
    vertical-align: -7px;
    margin-right: 5px;
}

#login-container {
    text-align: center;
    color: #fff;
}

.erwei-img {
    width: 200px;
    height: 200px;
    margin: auto;
    position: relative;

    /deep/ .mask {


        width: 200px;
        height: 200px;
        opacity: 0.8;
        background-color: rgba(255, 255, 255, .6);
        position: absolute;
        left: 0px;
        cursor: pointer; //小手



    }
}
</style>